#@layer()

#define css()
<style>
    .attachment_item {
        height: 200px;
        width: 200px;
        padding: 0px;
        border: 1px solid #ddd;
        margin: 10px;
        float: left;
    }

    .attachment_item:hover {
        border: 3px solid #3c8dbc;
    }

    .attachment_item img {
        height: 100%;
        width: 100%;
    }

    .my-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
</style>
#end

#define script()
<script>
    $(".attachment_item").click(function () {
        var src = $(this).children().attr("src");
        parent.layer.data.src = src;
        parent.layer.closeAll();
    })
</script>
#end

#define content()

<div class="row">
    <div class="col-xs-12">
        <div class="my-row">
            #for(attachment : page.list)
            <div class="attachment_item" data-aid="#(attachment.id ??)">
                <img src="#(attachment.path ??)"
                     title="#(attachment.title ??)"
                     alt="#(attachment.title ??)">
            </div>
            #end
        </div>

        <div class="row" style="padding-right: 20px">
            <div class="col-sm-12">
                #@_paginate()
            </div>
        </div>
    </div>
</div>

#end
